<template>
	<div class="carGoods">
		<!--爱车车型选择-->
		<div class="changeCar" @click="checkCar">
			<p id="selectCar">
				<span class="showCars">{{showTypeCar}}</span>
				<i>选择</i>
			</p>
		</div>
		<!--商品列表-->
		<div class="goods_filter">
			<ul>
				<li v-for="(item,index) in nav" :class="{listsel:sel==index}" @click="navs(index)">
					{{item}}
				</li>
				
			</ul>
		</div>
		<div class="goods_list" v-show="yeshas">
			<ul>
				<li v-for="(item,index) in list" @click="details">
					<a href="javascript:;">
						<img :src="item.img"/>
						<p>{{item.details}}</p>
						<span>￥<strong>{{item.price}}</strong></span>
					</a>
					<div class="goodsBtn">
						<i :class="{collection:col}" @click.stop="cols(index,$event)"></i>
						<button>
							<span class="dis">+1</span>
							加入购物车
						</button>
					</div>
				</li>
			</ul>
		</div>
		<div class="noHas" v-show="nohas">
			<img src="../assets/img/no-pros.png" alt="" />
			商品不存在！
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				showTypeCar:"爱车车型",
				nav:["默认","销量","价格","人气"],
				sel:0,
				list:[],
				yeshas:true,
				nohas:false,
				col:false
			}
		},
		mounted(){
			if(sessionStorage.carData){
					this.showTypeCar = sessionStorage.carData;
				}else{
					this.showTypeCar = "爱车车型"
				};
			this.fetchData();	
				
		},
		methods:{
			checkCar(){
				this.$router.push({path:"/autolist"})
			},
			fetchData(){
				var _this = this;
				var pid = this.$route.query.id;
				this.$http.get("src/json/data"+pid+".json").then(function(res){
					_this.list = res.data.goodsList;
					_this.yeshas = true;
					_this.nohas = false;
				}).catch(function(){
					_this.yeshas = false;
					_this.nohas = true;
				})
			},
			navs(index){
				this.sel = index;
				if(index == 0){
					var _this = this;
					var pid = this.$route.query.id;					
					this.$http.get("src/json/data"+pid+".json").then(function(res){
						_this.list = res.data.goodsList;
					})
				};
				if(index == 1){
					var _this = this;
					var pid = this.$route.query.id;					
					this.$http.get("src/json/data"+pid+".json").then(function(res){
						let arr = res.data.goodsList;
						function compare(price){
							return function(a,b){
								let value1 = a[price];
								let value2 = b[price];
								return value2 - value1
							}
						}
						_this.list = arr.sort(compare("sales"))
					})
				};
				if(index == 2){
					var _this = this;
					var pid = this.$route.query.id;					
					this.$http.get("src/json/data"+pid+".json").then(function(res){
						let arr = res.data.goodsList;
						function compare(price){
							return function(a,b){
								let value1 = a[price];
								let value2 = b[price];
								return value2 - value1
							}
						}
						_this.list = arr.sort(compare("price"))
					})
				};
				if(index == 3){
					var _this = this;
					var pid = this.$route.query.id;					
					this.$http.get("src/json/data"+pid+".json").then(function(res){
						let arr = res.data.goodsList;
						function compare(price){
							return function(a,b){
								let value1 = a[price];
								let value2 = b[price];
								return value2 - value1
							}
						}
						_this.list = arr.sort(compare("sentiment"))
					})
				}
			},
			cols(index,evt){
				console.log(index);
			
			},
			details(){
				this.$router.push({path:"/goodsdetails"})
			}
		}
	}
</script>

<style scoped="scoped">
	.noHas{
		width: 100vw;
		text-align: center;
	}
	.noHas img{
		display: block;
		width: 50%;
		margin: 0 auto;
	}
</style>